<template>
  <el-scrollbar class="asideNav" v-if="!ifClose">
    <!-- 顶部标签 -->
    <div class="header">
      <div class="top">
        <p class="tag">业务区域</p>
        <p class="close" @click="closeAsideNav">X</p>
      </div>
      <div class="bottom">
        <p class="name">{{ operationName }}</p>
      </div>
    </div>
    <!-- 环境检测 -->
    <div class="environment">
      <div class="top">
        <p class="tag">环境监测数据</p>
      </div>
      <div class="content" v-if="environmentArr.length == 0">暂无数据</div>
      <div class="content" v-for="item in environmentArr">
        <div class="deviceInfo">
          <p class="name">{{ item.deviceName }}</p>
        </div>
        <div class="timeInfo">
          {{ formatISODate(item.createTime) }}
        </div>
        <div class="info">
          <div class="child">
            <div class="tag">
              <svg t="1733843634930" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="10732" width="14" height="14">
                <path
                  d="M197.632 612.010667c0-26.396444 20.821333-47.217778 47.217778-47.217778 26.396444 0 47.217778 21.617778 47.217778 47.217778 0 26.396444-20.821333 47.189333-47.217778 47.189333-26.396444 0-47.217778-20.792889-47.217778-47.217778z m756.024889-141.596445a63.345778 63.345778 0 0 1-63.203556 63.175111c-34.417778 0-62.407111-28.785778-63.203555-63.175111a63.345778 63.345778 0 0 1 63.203555-63.203555 63.345778 63.345778 0 0 1 63.203556 63.203555z m-362.410667 117.589334c0-12.8 11.207111-23.210667 24.007111-23.210667 12.8 0 23.978667 10.410667 23.978667 23.210667a24.064 24.064 0 0 1-23.978667 24.007111 24.064 24.064 0 0 1-24.007111-24.007111z m-109.596444 0a24.064 24.064 0 0 1-24.007111 24.007111c-12.8 0-23.210667-10.410667-23.210667-24.803556 0.824889-12.8 11.207111-23.210667 24.007111-23.210667 12.8 0 23.210667 10.410667 23.210667 24.007112zM248.035556 432.810667h192.796444v57.6H178.432V146.403556h256v57.6H248.035556v76.8h172.8v57.6H248.035556v94.407111z m488.021333 36.778666c-24.007111 18.403556-54.414222 27.221333-91.221333 27.221334-46.364444 0-83.2-16.014222-112.782223-47.217778s-44.003556-73.585778-44.003555-128c0-57.6 15.189333-101.603556 44.8-133.603556 29.582222-32 68.807111-47.985778 116.792889-47.985777 41.614222 0 76.003556 12.8 102.4 37.603555 16.014222 14.392889 27.192889 35.982222 35.214222 63.203556l-68.835556 16.782222c-3.982222-17.578667-12.8-32-25.6-42.382222-12.8-10.410667-28.785778-15.217778-47.189333-15.217778-25.6 0-46.364444 8.817778-62.378667 27.221333-16.014222 18.375111-24.007111 47.985778-24.007111 88.775111 0 43.235556 7.992889 74.410667 23.210667 92.814223 15.189333 18.403556 35.982222 27.989333 60.785778 27.989333 18.403556 0 34.417778-6.4 48.014222-17.578667 13.596444-11.207111 23.182222-29.610667 28.785778-55.210666l67.982222 21.617777c-10.382222 37.575111-27.989333 65.592889-51.968 83.968z m220.728889 177.607111l26.424889 11.207112 7.196444 3.214222s-5.603556 11.178667-8.817778 16.782222l-5.603555 9.614222-7.196445 10.382222c-1.592889 3.214222-3.185778 6.4-5.603555 9.614223-1.194667 1.592889-2.389333 3.413333-3.584 5.205333-1.194667 1.792-2.389333 3.584-3.612445 5.176889l-9.585777 14.421333-7.196445 9.585778a85.447111 85.447111 0 0 1-3.612444 4.408889c-1.194667 1.393778-2.389333 2.787556-3.584 4.408889-2.332444 1.706667-3.811556 3.896889-5.404445 6.200889-0.568889 0.853333-1.137778 1.706667-1.792 2.56l-1.422222 1.934222a50.062222 50.062222 0 0 1-4.977778 6.087111c-2.616889 3.669333-5.575111 6.997333-8.448 10.183111-1.507556 1.706667-2.986667 3.356444-4.380444 5.034667l-7.196445 7.196444-7.964444 8.789334-7.224889 7.196444c-1.991111 1.592889-3.811556 3.413333-5.603556 5.205333s-3.584 3.612444-5.603555 5.205334l-8.817778 7.992889c-1.991111 1.592889-3.783111 3.214222-5.575111 4.807111a139.946667 139.946667 0 0 1-5.603556 4.778666c-1.194667 1.223111-2.389333 2.218667-3.584 3.214223-1.223111 0.995556-2.417778 1.991111-3.612444 3.214222l-11.207111 8.789333a44.657778 44.657778 0 0 0-3.584 2.787556c-1.223111 0.995556-2.417778 1.991111-3.612445 2.816l-16.782222 12.003555-7.224889 4.778667c-1.991111 1.223111-3.982222 2.616889-5.973333 4.010667-1.991111 1.422222-4.010667 2.787556-6.001778 3.982222l-7.224889 4.835555-16.782222 9.585778-5.603555 3.185778a160.085333 160.085333 0 0 0-16.782223 8.021333 28.188444 28.188444 0 0 0-3.612444 1.592889 28.472889 28.472889 0 0 1-3.612445 1.592889l-21.617777 9.614222c-8.789333 3.982222-17.578667 7.196444-26.368 10.382222-1.848889 0.625778-3.84 1.365333-5.859556 2.133334a136.248889 136.248889 0 0 1-10.154667 3.470222l-7.196444 2.389333c-3.612444 1.223111-7.395556 2.218667-11.207111 3.214223-3.783111 0.995556-7.594667 1.991111-11.178667 3.214222h-1.621333l-21.617778 4.778666c-1.166222 0.398222-2.389333 0.597333-3.584 0.796445-1.194667 0.199111-2.389333 0.398222-3.584 0.824889-3.214222 0.398222-6.200889 0.995556-9.216 1.592889-2.986667 0.568889-5.973333 1.194667-9.187555 1.592889l-5.603556 0.796444a202.979556 202.979556 0 0 1-23.210667 3.214222h-5.603555a155.932444 155.932444 0 0 1-9.585778 0.796445 155.932444 155.932444 0 0 0-9.614222 0.796444h-7.196445c-19.2 0.796444-37.603556 0.796444-55.978666 0-5.774222 0-10.865778-0.654222-16.497778-1.365333l-1.905778-0.227556-6.4-0.824889a231.964444 231.964444 0 0 1-23.210667-3.185777l-4.807111-0.796445a124.785778 124.785778 0 0 1-9.187555-1.592889 125.952 125.952 0 0 0-9.216-1.621333l-7.196445-1.592889a120.291556 120.291556 0 0 1-15.217777-3.185778l-3.185778-0.824889-4.778667-0.796444c-3.612444-1.194667-7.196444-2.190222-10.808889-3.185778a217.543111 217.543111 0 0 1-10.808889-3.214222l-7.196444-2.389333a66.56 66.56 0 0 1-11.008-3.328l-4.181333-1.479112-7.196445-2.389333c-6.4-3.214222-12.8-5.603556-19.2-7.992889-0.796444-0.398222-1.792-0.796444-2.816-1.223111-0.995556-0.398222-1.991111-0.796444-2.787555-1.194667-5.603556-2.389333-11.207111-4.807111-16.014223-7.196444-1.194667-0.796444-2.588444-1.422222-3.982222-1.991111-1.422222-0.597333-2.816-1.194667-3.982222-1.991111a63.203556 63.203556 0 0 0-6.428445-3.214222 64.455111 64.455111 0 0 1-6.4-3.214223 78.648889 78.648889 0 0 0-3.128888-1.450666 32.256 32.256 0 0 1-4.864-2.56c-2.816-1.564444-5.802667-3.384889-8.817778-5.176889a499.484444 499.484444 0 0 0-8.789334-5.205334c-3.185778-1.592889-5.603556-3.185778-7.992888-4.778666l-11.207112-7.224889c-1.592889-1.194667-2.986667-2.190222-4.408888-3.185778a215.495111 215.495111 0 0 1-4.380445-3.214222c-1.592889-1.194667-3.413333-2.389333-5.205333-3.584a116.963556 116.963556 0 0 1-5.205334-3.612445l-12.8-9.585777-10.382222-8.021334-8.817778-7.964444-7.196444-6.428445a74.296889 74.296889 0 0 0-3.783111-3.413333 92.046222 92.046222 0 0 1-5.006222-4.579555 553.528889 553.528889 0 0 0-7.338667-7.139556c-5.063111-4.892444-10.24-9.898667-15.075556-15.274667a21.333333 21.333333 0 0 0-2.787555-3.185777 21.617778 21.617778 0 0 1-2.816-3.214223 55.04 55.04 0 0 0-8.817778-10.382222l-4.778667-5.603555-2.844444-3.612445c-7.964444-10.154667-16.497778-20.935111-24.348444-32.398222l-3.982223-5.603556c-1.223111-1.991111-2.616889-3.982222-4.010666-5.973333-1.422222-1.991111-2.816-4.010667-4.010667-6.001778a16.725333 16.725333 0 0 1-3.214222-4.835555 275.456 275.456 0 0 1-15.985778-25.6 15.587556 15.587556 0 0 1-0.654222-1.507556c-0.284444-0.682667-0.455111-1.166222-0.938667-1.678222a211.626667 211.626667 0 0 0-3.612444-6.798222c-1.194667-2.190222-2.389333-4.380444-3.584-6.798223-0.398222-0.796444-0.824889-1.792-1.223111-2.787555a39.424 39.424 0 0 0-1.194667-2.816v-15.985778c46.734222-15.274667 64.199111-7.111111 89.088 4.579556 19.427556 9.102222 43.377778 20.366222 89.315555 24.206222 128 11.207111 199.196444 8.021333 244.792889 1.621333 0 0 55.210667-14.421333 54.414223-14.421333h0.796444v-0.796445h1.592889l3.214222-1.592888a270.563556 270.563556 0 0 0 56.007111-12.8c42.382222 1.592889 84.764444 8.817778 125.582222 21.617777 72.988444 18.858667 109.454222 1.450667 142.961778-14.535111 30.435556-14.506667 58.424889-27.875556 109.056-11.889778z"
                  p-id="10733"></path>
              </svg>
              <div>土壤EC值</div>
            </div>
            <div class="value">{{ item.soilEcValue }}us/cm</div>
          </div>
          <div class="child">
            <div class="tag">
              <svg t="1733843164261" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="4292" width="14" height="14">
                <path
                  d="M792.701564 500.524046V111.941057a115.58565 115.58565 0 0 0-230.997748 0v388.582989a273.691547 273.691547 0 0 0-166.436394 249.741367A277.683243 277.683243 0 0 0 677.810122 1023.956959a277.683243 277.683243 0 0 0 282.369148-273.691546A273.691547 273.691547 0 0 0 792.701564 500.524046zM677.810122 949.329588A202.88232 202.88232 0 0 1 473.365834 769.009031 199.758383 199.758383 0 0 1 639.281572 555.366486V111.941057a37.834342 37.834342 0 0 1 38.52855-37.313685 38.354998 38.354998 0 0 1 27.074116 10.933777 37.313686 37.313686 0 0 1 11.454434 26.379908V555.366486a200.105487 200.105487 0 0 1 165.915738 214.163202A203.055872 203.055872 0 0 1 677.810122 949.329588z"
                  p-id="4293"></path>
                <path
                  d="M781.594234 736.728354a31.412917 31.412917 0 0 0-30.545156 30.371605 74.627372 74.627372 0 0 1-147.692775-10.239569 72.718299 72.718299 0 0 1 65.776218-73.065404 31.933573 31.933573 0 0 0 28.809636-17.355202 29.850949 29.850949 0 0 0-3.991696-32.801334 32.974885 32.974885 0 0 0-32.454229-10.413121 133.635061 133.635061 0 0 0 16.140338 266.749465 136.411893 136.411893 0 0 0 137.80031-124.610355h-0.86776a31.586469 31.586469 0 0 0-32.974886-28.636085zM410.887105 274.212203H179.368701a37.487238 37.487238 0 0 0-38.52855 36.793029 35.92527 35.92527 0 0 0 11.280882 26.032804 39.39631 39.39631 0 0 0 27.247668 10.066018H410.887105a39.39631 39.39631 0 0 0 27.247668-10.760226 36.619478 36.619478 0 0 0 11.280882-26.032804 35.92527 35.92527 0 0 0-11.280882-26.032804A39.39631 39.39631 0 0 0 410.887105 274.212203zM410.887105 200.452591a39.222758 39.222758 0 0 0 27.247668-10.586673 35.92527 35.92527 0 0 0 0-52.065609A39.39631 39.39631 0 0 0 410.887105 126.866532H102.311601A37.834342 37.834342 0 0 0 63.783051 163.659561a36.619478 36.619478 0 0 0 11.280882 26.206357 39.222758 39.222758 0 0 0 27.247668 10.586673zM437.614117 484.210155a35.92527 35.92527 0 0 0 11.280882-26.032804 36.619478 36.619478 0 0 0-11.280882-26.032804 39.39631 39.39631 0 0 0-26.727012-10.760226H115.848659A37.834342 37.834342 0 0 0 76.625901 458.177351a35.92527 35.92527 0 0 0 11.280882 26.032804 39.39631 39.39631 0 0 0 27.941876 10.760226h295.038446a39.39631 39.39631 0 0 0 26.727012-10.760226z"
                  p-id="4294"></path>
              </svg>
              <div>土壤温度</div>
            </div>
            <div class="value">{{ item.soilTemperature }}°c</div>
          </div>
          <div class="child">
            <div class="tag">
              <svg t="1733843240568" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="6203" width="14" height="14">
                <path
                  d="M545.6 131.6l-36.5-50.7-36.5 50.7c-2.7 3.7-65.7 91.4-129.8 197.9-90.3 150-134.2 255.6-134.2 322.6 0 79.5 31.3 154.3 88.2 210.5 56.7 56 132.1 86.9 212.3 86.9 80.2 0 155.5-30.9 212.3-86.9 56.9-56.2 88.2-130.9 88.2-210.5 0-67-43.9-172.5-134.2-322.6C611.3 223 548.3 135.3 545.6 131.6z m-36.5 727.9c-116.1 0-210.5-93-210.5-207.4 0-27.8 15.7-100.7 121-275.7 32.6-54.2 65.5-104.2 89.5-139.6 23.9 35.3 56.6 85 89.2 139.1 105.5 175.4 121.3 248.3 121.3 276.2 0 114.4-94.4 207.4-210.5 207.4zM430.5 109h-366v90h307.7c20.6-32.7 40.5-63.2 58.3-90zM587.7 109c17.8 26.8 37.7 57.3 58.4 90h313.4v-90H587.7zM218.6 468.4c14.5-29.6 30.3-59.8 47-90H66v90h152.6zM799.6 468.4h159.8v-90H752.7c16.6 30.2 32.4 60.4 46.9 90zM64.5 647.8v90h78.8c-1-10.8-1.5-21.8-1.5-32.8 0-17 2.6-36.2 7.5-57.2H64.5zM876.4 705c0 11.1-0.5 22-1.5 32.8h75.3v-90h-81.3c4.8 21 7.5 40.2 7.5 57.2z"
                  p-id="6204"></path>
                <path
                  d="M536.1 737.7c-1.1-8.5-8.2-15-16.8-15.6-16.5-1.1-36.8-8.9-56.7-38-9.7-14.1-16.2-29.2-20.2-39.9-3.2-8.5-12.2-13.3-21-11.2l-38.3 9.2c-10.3 2.5-16.2 13.4-12.7 23.4 5.3 15.1 14.5 37 28.9 58.7 15.5 23.2 33.8 41.2 54.4 53.6 21.5 12.9 45 19.3 70 19.3h0.2c10.7 0 18.8-9.5 17.4-20.1l-5.2-39.4z"
                  p-id="6205"></path>
              </svg>
              <div>土壤水分</div>
            </div>
            <div class="value">{{ item.soilMoisture }}%</div>
          </div>
          <div class="child">
            <div class="tag">
              <svg t="1733843560488" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="8846" width="14" height="14">
                <path
                  d="M512 100.571429c68.169143 0 123.392 55.296 123.392 123.465142v292.498286c0 21.504 8.411429 42.203429 23.478857 57.563429a205.677714 205.677714 0 1 1-293.741714 0c15.067429-15.36 23.405714-36.059429 23.405714-57.563429v-292.571428c0-68.096 55.296-123.392 123.465143-123.392zM512 18.285714a205.677714 205.677714 0 0 0-205.750857 205.750857v292.498286a287.963429 287.963429 0 1 0 411.428571 0v-292.571428A205.677714 205.677714 0 0 0 512 18.285714z m41.179429 628.150857a82.285714 82.285714 0 1 1-82.285715 0V224.036571a41.179429 41.179429 0 0 1 82.212572 0v422.4z"
                  fill="#666666" p-id="8847"></path>
              </svg>
              <div>空气温度</div>
            </div>
            <div class="value">{{ item.airTemperature }}°c</div>
          </div>
          <div class="child">
            <div class="tag">
              <svg t="1733843804294" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="11725" width="14" height="14">
                <path
                  d="M511.488 696a32 32 0 0 1 0-64 41.92 41.92 0 0 0 41.28-42.56 32 32 0 0 1 64 0 105.92 105.92 0 0 1-105.28 106.56z m-0.64-456.64c39.04 47.68 89.92 113.28 131.84 167.68l2.56 3.52c64 83.52 87.04 212.8 4.48 298.24a189.76 189.76 0 0 1-275.2 0c-74.56-77.44-72.64-197.44 4.8-298.56l26.88-35.52c34.56-45.44 72.96-96 104.64-135.04v-0.32z m0-79.04a37.12 37.12 0 0 0-28.48 13.44c-42.88 50.88-105.92 135.04-153.6 197.76-92.8 121.6-101.12 276.8 0 381.76a253.76 253.76 0 0 0 367.68 0c101.12-104.96 89.92-265.92 0-381.76-49.92-64-114.56-147.84-156.8-197.76a37.44 37.44 0 0 0-28.16-13.76l-0.64 0.32z"
                  fill="#FF8E1C" p-id="11726"></path>
              </svg>
              <div>空气湿度</div>
            </div>
            <div class="value">{{ item.airHumidity }}%</div>
          </div>
          <div class="child">
            <div class="tag">
              <svg t="1733843869978" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="12732" width="14" height="14">
                <path
                  d="M512 512m-273.066667 0a273.066667 273.066667 0 1 0 546.133334 0 273.066667 273.066667 0 1 0-546.133334 0Z"
                  fill="#FFB257" p-id="12733"></path>
                <path
                  d="M512 1024h-40.96l13.653333-136.533333h68.266667l13.653333 136.533333h-54.613333z m-348.16-136.533333l-54.613333-54.613334L218.453333 750.933333l40.96 40.96L163.84 887.466667z m703.146667-6.826667l-95.573334-95.573333 40.96-40.96 109.226667 81.92c-20.48 13.653333-34.133333 34.133333-54.613333 54.613333zM0 539.306667v-27.306667-47.786667L136.533333 477.866667v54.613333l-136.533333 6.826667z m1024-13.653334l-136.533333-6.826666v-13.653334-47.786666l136.533333-13.653334v81.92zM225.28 266.24L122.88 177.493333c20.48-20.48 40.96-40.96 61.44-54.613333L273.066667 225.28c-20.48 13.653333-34.133333 27.306667-47.786667 40.96z m566.613333-6.826667l-40.96-40.96L839.68 109.226667c20.48 13.653333 40.96 34.133333 54.613333 54.613333l-102.4 95.573333zM477.866667 136.533333l-13.653334-136.533333H546.133333l-6.826666 136.533333H477.866667z"
                  fill="#FFB257" p-id="12734"></path>
              </svg>
              <div>光照强度</div>
            </div>
            <div class="value">{{ item.lightIntensity }}Lx</div>
          </div>
          <div class="child">
            <div class="tag">
              <svg t="1733843896989" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="14648" width="14" height="14">
                <path
                  d="M814.933333 349.866667C776.533333 217.6 652.8 128 512 128S247.466667 217.6 209.066667 349.866667C85.333333 379.733333 0 490.666667 0 618.666667 0 772.266667 123.733333 896 277.333333 896h469.333334c153.6 0 277.333333-123.733333 277.333333-277.333333 0-128-85.333333-238.933333-209.066667-268.8zM746.666667 810.666667h-469.333334C170.666667 810.666667 85.333333 725.333333 85.333333 618.666667c0-93.866667 68.266667-174.933333 162.133334-187.733334 17.066667-4.266667 29.866667-17.066667 34.133333-34.133333C307.2 290.133333 405.333333 213.333333 512 213.333333s204.8 76.8 230.4 183.466667c4.266667 17.066667 17.066667 29.866667 34.133333 34.133333 93.866667 12.8 162.133333 93.866667 162.133334 187.733334 0 106.666667-85.333333 192-192 192z"
                  p-id="14649"></path>
                <path
                  d="M806.4 695.466667h-29.866667l17.066667-12.8c12.8-8.533333 17.066667-25.6 21.333333-38.4 0-17.066667-4.266667-29.866667-17.066666-38.4-21.333333-21.333333-51.2-21.333333-72.533334-4.266667l-12.8 12.8c-8.533333 8.533333-8.533333 21.333333-4.266666 29.866667 8.533333 8.533333 21.333333 8.533333 29.866666 4.266666l12.8-12.8c4.266667-4.266667 8.533333-4.266667 12.8 0 4.266667 0 4.266667 4.266667 4.266667 4.266667s0 4.266667-4.266667 8.533333l-64 51.2c-8.533333 4.266667-8.533333 17.066667-8.533333 25.6 4.266667 8.533333 12.8 12.8 21.333333 12.8h89.6c12.8 0 21.333333-8.533333 21.333334-21.333333s-8.533333-21.333333-17.066667-21.333333zM571.733333 469.333333c-59.733333 0-110.933333 51.2-110.933333 110.933334v46.933333c0 59.733333 51.2 110.933333 110.933333 110.933333s110.933333-51.2 110.933334-110.933333v-46.933333c-4.266667-59.733333-51.2-110.933333-110.933334-110.933334z m42.666667 157.866667c0 25.6-21.333333 46.933333-46.933333 46.933333s-46.933333-21.333333-46.933334-46.933333v-46.933333c0-25.6 21.333333-46.933333 46.933334-46.933334s46.933333 21.333333 46.933333 46.933334v46.933333zM345.6 533.333333h59.733333c17.066667 0 34.133333-12.8 34.133334-34.133333s-17.066667-29.866667-34.133334-29.866667H345.6C273.066667 469.333333 213.333333 529.066667 213.333333 601.6s59.733333 132.266667 132.266667 132.266667h59.733333c17.066667 0 34.133333-12.8 34.133334-34.133334s-12.8-34.133333-34.133334-34.133333H345.6c-38.4 0-68.266667-29.866667-68.266667-68.266667s29.866667-64 68.266667-64z"
                  p-id="14650"></path>
              </svg>
              <div>二氧化碳</div>
            </div>
            <div class="value">{{ item.carbonDioxide }}ppm</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 平均数据 -->
    <div class="average">
      <div class="top">
        <p class="tag">气象指标统计</p>
      </div>
      <div class="content">
        <div class="info">
          <div class="child" v-for="item in averageData">
            <div class="tag">
              <div>{{item.name}}</div>
            </div>
            <div class="value">{{ item.value && item.value !== undefined ?
              (item.value +  item.unit) : "无数据" }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="imgList">
      <div class="top">
        <p class="tag">图片列表</p>
      </div>
      <div class="list">
        <div class="info" v-if="picts.length==0">暂无图片</div>
        <el-image class="pict" :src="item.imageUrl" alt="" v-for="(item, idx) in picts" lazy="true"
          :preview-src-list="srcPict" :initial-index="idx"></el-image>
      </div>
    </div>
    <div class="externalWeb">
      <div class="externalSrc">
        <el-button type="primray" @click="openDialog" style="width: 80%;">
          <svg t="1734353915429" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7467" width="16" height="16"><path d="M576 85.333333c0 18.944-8.234667 35.968-21.333333 47.701334V213.333333h213.333333a128 128 0 0 1 128 128v426.666667a128 128 0 0 1-128 128H256a128 128 0 0 1-128-128V341.333333a128 128 0 0 1 128-128h213.333333V133.034667A64 64 0 1 1 576 85.333333zM256 298.666667a42.666667 42.666667 0 0 0-42.666667 42.666666v426.666667a42.666667 42.666667 0 0 0 42.666667 42.666667h512a42.666667 42.666667 0 0 0 42.666667-42.666667V341.333333a42.666667 42.666667 0 0 0-42.666667-42.666666H256z m-170.666667 128H0v256h85.333333v-256z m853.333334 0h85.333333v256h-85.333333v-256zM384 618.666667a64 64 0 1 0 0-128 64 64 0 0 0 0 128z m256 0a64 64 0 1 0 0-128 64 64 0 0 0 0 128z" fill="#000000" p-id="7468"></path></svg>
          &nbsp;AI聊天
        </el-button>
      </div>
    </div>
  </el-scrollbar>
  <el-dialog v-model="dialogVisible" title="Tips" width="1500px" z-index=99 destroy-on-close top="10vh">
    <div style="display: flex;">
      <iframe width="1920" height="680" src="https://flower.vip.cpolar.cn" frameborder="0"
        ref="remoteUrl"></iframe>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">Cancel</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { watch, ref, onMounted, reactive, computed, inject, nextTick } from 'vue';
import { reqMonitorAverageData, reqMonitorRecentData } from '../../api/monitor';
import { formatISODate } from '@/constant/date'
import { getRecentOperationPict } from '../../api/file'
import useOperationStore from '../../store/operation';
import { ElMessage } from 'element-plus';


let operationStore=useOperationStore()
const remoteUrl = ref()

//iframe开关
let dialogVisible = ref(false)
const openDialog = () => {
  dialogVisible.value = true
}
const closeDialog = () => {
  dialogVisible.value = false
}

// 侧边栏开关
let ifClose = ref(false)
const closeAsideNav = () => {
  ifClose.value = true
}

// 业务
let operationId = ref(operationStore.data.length>0?operationStore.data[operationStore.index].id:'')
let operationName = ref(operationStore.data.length>0?operationStore.data[operationStore.index].businessName:'')
operationStore.$subscribe(async(mutation, state)=>{
  operationId.value=operationStore.data[operationStore.index].id
  operationName.value=operationStore.data[operationStore.index].businessName
  await initData()
})

// 环境监测数据
let environmentArr = reactive([])
// 平均数据
let averageData = reactive({
  dayAverageAirTemperature:{
    name:"日平均温度",
    value:undefined,
    unit:"°c"
  },
  monthAverageAirTemperature:{
    name:"月平均温度",
    value:undefined,
    unit:"°c"
  },
  yearAverageAirTemperature:{
    name:"月平均温度",
    value:undefined,
    unit:"°c"
  },
  dayAverageAirHumidity:{
    name:"日相对平均湿度",
    value:undefined,
    unit:"%"
  },
  monthAverageAirHumidity:{
    name:"月相对平均湿度",
    value:undefined,
    unit:"%"
  },
  yearAverageAirHumidity:{
    name:"年相对平均湿度",
    value:undefined,
    unit:"%"
  },
  dayAverageSoilTemperature:{
    name:"日平均土温",
    value:undefined,
    unit:"°c"
  },
  monthAverageSoilTemperature:{
    name:"月平均土温",
    value:undefined,
    unit:"°c"
  },
  yearAverageSoilTemperature:{
    name:"年平均土温",
    value:undefined,
    unit:"°c"
  },
  dayAverageSoilMoisture:{
    name:"日平均土壤水分",
    value:undefined,
    unit:"%"
  },
  monthAverageSoilMoisture:{
    name:"月平均土壤水分",
    value:undefined,
    unit:"%"
  },
  yearAverageSoilMoisture:{
    name:"年平均土壤水分",
    value:undefined,
    unit:"%"
  },
})
// 图片集
let picts = reactive([])
// 预览图片集
let srcPict = computed(() => {
  return picts.map((item) => item.imageUrl)
})



// 请求传感器数据
const initData = async () => {
  let res1 = await reqMonitorRecentData(operationId.value);
  switch (res1.code) {
    case 0:
      environmentArr.splice(0, environmentArr.length)
      environmentArr.push(...res1.data)
      break;
    case 1:
      setTimeout(() => { $router.push('/login') }, 1000)
      break;
  }
  let res2 = await reqMonitorAverageData(operationId.value);
  switch (res2.code) {
    case 0:
      let keys=Object.keys(res2.data)
      for(let key of keys){
        averageData[key].value=Math.ceil(res2.data[key])
      }
      break;
    case 1:
      setTimeout(() => { $router.push('/login') }, 1000)
      break;
  }
  let res3 = await getRecentOperationPict(operationId.value);
  switch (res3.code) {
    case 0:
      picts.splice(0, picts.length)
      picts.push(...res3.data)
      break;
    case 1:
      setTimeout(() => { $router.push('/login') }, 1000)
      break;
  }
}

onMounted(async () => {
  if (operationId.value) {
    await initData()
  }
}
)
</script>

<style lang="scss" scoped>
.asideNav{
  --font-size: 16px;
  --title-font-size: 16px;
}
p {
  margin: 4px 0 !important;
  font-size: var(--midFont);
  font-weight: 700;
}

.tag {
  font-size: 16px;
}

svg * {
  fill: rgb(93, 209, 168);
}

* {
  box-sizing: border-box;
}

.asideNav {
  --midFont:14px;
  --smallFont:12px;
  position: absolute;
  overflow-y: auto;
  background-color: white;
  // width: 16%;
  width: 350px;
  right: 0.5%;
  height: 98%;
  top: 1%;
  border-radius: 5px;

  .header {
    width: 100%;
    height: 8%;
    border-bottom: 1px solid rgb(232, 229, 229);
    padding: 2% 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .top {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      display: flex;
      color: gray;
      font-weight: 700;

      .tag {
        margin: 0;
        flex: 0.95;
        display: flex;
        align-items: center;
      }

      .close {
        margin: 0;
        flex: 0.05;
        display: flex;
        align-items: center;
        justify-content: right;
        cursor: pointer;
      }
    }

    .bottom {
      flex: 1;
      display: flex;
      align-items: center;
      display: flex;

      .name {
        margin: 0;
        flex: 1;
        display: flex;
        align-items: center;
        font-size: var(--midFont);
        color: gray;
      }
    }
  }

  .environment {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 2% 5%;
    justify-content: center;
    border-bottom: 1px solid rgb(232, 229, 229);

    .top {
      color: gray;
      font-weight: 700;

      .tag {
        margin: 0;
      }
    }

    .content {
      display: flex;
      flex-direction: column;
      flex: 1;
      padding: 2% 0;

      .deviceInfo {
        display: flex;
        margin: 1% 0;
        align-items: center;

        .name {
          margin: 0;
          color: rgb(111, 109, 109);
        }
      }

      .timeInfo {
        font-size: var(--midFont);
        color: gray;
        margin: 1% 0;
      }

      .info {
        display: flex;
        flex-wrap: wrap;
        margin: 1% 0;

        .child {
          width: 27%;
          margin: 2% 2%;
          display: flex;
          flex-direction: column;
          font-size: var(--midFont);

          .tag {
            display: flex;
            align-items: center;
            color: gray;
            font-weight: 700;
            margin-bottom: 5%;
            text-wrap: nowrap;
            font-size: var(--smallFont);

            div {
              margin-left: 4%;
            }
          }

          .value {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--midFont);
          }
        }
      }
    }
  }

  .average {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 2% 5%;
    justify-content: center;
    border-bottom: 1px solid rgb(232, 229, 229);

    .top {
      color: gray;
      font-weight: 700;

      .tag {
        margin: 0;
      }
    }

    .content {
      display: flex;
      flex-direction: column;
      flex: 1;
      padding: 2% 0;

      .info {
        display: flex;
        flex-wrap: wrap;
        margin: 1% 0;

        .child {
          width: 33%;
          margin: 2% 0;
          display: flex;
          flex-direction: column;
          font-size: var(--midFont);

          .tag {
            display: flex;
            align-items: center;
            color: gray;
            font-weight: 700;
            margin-bottom: 5%;
            text-align: center;
            font-size: var(--smallFont);

            div {
              margin-left: 4%;
            }
          }

          .value {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-size: var(--midFont);
          }
        }
      }
    }
  }

  .imgList {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 2% 5%;
    justify-content: center;
    border-bottom: 1px solid rgb(232, 229, 229);

    .top {
      color: gray;
      font-weight: 700;

      .tag {
        margin: 0;
      }
    }

    .list {
      display: flex;
      flex-wrap: wrap;
      flex: 1;
      padding: 2% 0;

      .info{
        display: flex;
        flex:1;
      }

      .pict {
        width: 32%;
        margin: 1% 0.5%;
        aspect-ratio: 16/9;
      }
    }
  }

  .externalWeb{
    padding: 5% 0;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid rgb(232, 229, 229);

    .externalSrc{
      display: flex;
      width: 90%;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>